<template>
  <div class="approval-container">
    <div class="top">
      <span @click="not" id="span">待审批</span>
      <span @click="down">已审批</span>
    </div>
<ul v-if="show">
    <van-swipe-cell  v-for="i in list" :key="i.id">
      <template #right>
        <van-button square text="审批" />
      </template>

      <li >
        <p>{{ i.title }}</p>
        <div>{{ i.name }}</div>
        <div>{{ i.date }}</div>
             <i class="icon">&#xe62b;</i>

      </li>
    </van-swipe-cell>
</ul>
<ul v-else>
      <van-swipe-cell v-for="i in data" :key="i.id">
      <template #right>
        <van-button square text="删除" @click="clearEvt(i.id)"/>
      </template>

      <li  >
        <p>{{ i.title }}</p>
        <div>{{ i.name }}</div>
        <div>{{ i.date }}</div>
             <i class="icon">&#xe609;</i>

      </li>
    </van-swipe-cell>
    </ul>
  </div>
</template>
<script>
export default {
  name: 'index',
  data () {
    return {
      show: true,
      list: Array(6)
        .fill()
        .map((_, index) => {
          return {
            id: index,
            title: '甲苯酸的合成' + 0 + (index + 1),
            date: '2022',
            name: Math.random() > 0.5 ? '张三' : '李四'

          }
        }),
      data: Array(4)
        .fill()
        .map((_, index) => {
          return {
            id: index,
            title: '甲苯酸的合成',
            date: '2022',
            name: Math.random() > 0.5 ? '张三' : '李四'

          }
        })

    }
  },
  methods: {
    not () {
      this.show = true
    },
    down () {
      this.show = false
    },
    clearEvt (id) {
      this.data = this.data.filter(item => item.id !== id)
    }
  }

}
</script>
<style lang="less" scoped>
@import "@/style/common.less";
.approval-container {
  flex-direction: column;
  .top {
    display: flex;
    height: 60px;
    justify-content: space-around;
    align-items: center;
    background-color: rgba(225, 224, 224, 0.3);
    span {
      font-size: 1rem;
      &:hover {
        color: @c6;
      }
    }
  }
ul{
   width: 100%;

      list-style: none;
      position: relative;
      top: 0;
      left: 0;
}
  li {
    // margin-bottom: 10px;
    width: 100%;
    list-style: none;
    border-bottom: 1px solid @c4;
    background-color: rgba(255, 255, 255, 0.5);
    height:80px;

    p{
      padding-top:10px;
      font-size:.9rem;
      padding-left:30px;
    }
    div{
  float:left;
      color:@c11;
      font-size:.7rem;
margin-left:30px;
    }
  }
  .icon {
    .EDM-font;
    position: absolute;
    top: 20px;
    right: 20px;
  }
  .van-button {
    height: 81px;
    background-color: rgba(245, 233, 233, 0.5);
    border-bottom:1px solid @c4;
  }
}
</style>
